<template>
  <div class="textblank-editor">
    <h3>填空题</h3>
    <el-form :rules="rules" :model="localModel" label-position="left" label-width="50px" ref="textBlankForm"
      status-icon>
      <el-form-item label="标题" prop="title" required>
        <el-input v-model="localModel.title"></el-input>
      </el-form-item>
      <el-form-item label="得分" prop="score" v-if="judgeThis()">
        <el-input-number :min="0" v-model="localModel.score"></el-input-number>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-tooltip content="使用至少连续的三个英文下划线_表示一个留空" placement="top">
          <el-input v-model="localModel.description" @change="handleChange"></el-input>
        </el-tooltip>
        <div v-if="judgeThis()">
          <el-divider>答案</el-divider>
          <el-input v-model="localModel.options[index]" v-for="(item,index) in localModel.options" :key="index"
            style="margin:5px;width:70%">
          </el-input>
        </div>
      </el-form-item>
      <el-form-item label="配置项">
        <el-divider></el-divider>
        <div style="display:flex;justify-content:space-around">
          <el-switch v-model="localModel.must" active-text="必做" inactive-text="选做"></el-switch>
          <!-- 是否向用户展示结果 -->
          <el-switch v-model="localModel.showResult" v-if="options.showResult" active-text="展示本题结果"
            inactive-text="不展示本题结果"></el-switch>
          <!-- 是否判断此题 -->
          <el-switch :active-value="1" :inactive-value="2" v-model="localModel.key" v-if="options.autoJudge"
            active-text="自动判题" inactive-text="不判本题"></el-switch>
        </div>
      </el-form-item>
    </el-form>
    <div class="q-item q-item-control">
      <el-button type="primary" @click="handleSave">确定</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "QeditorTextBlank",
  props: {
    options: {
      type: Object,
      default: function() {
        return {
          autoJudge: false,
          showResult: false,
          limitNumber: false
        };
      }
    },
    setting: {
      type: Object,
      default: function() {
        return {
          type: "blank",
          must: true,
          title: "填空题",
          description: "i am ___ ques ______",
          options: ["xxx", "xxx"]
        };
      }
    }
  },
  data() {
    return {
      localModel: {},
      answers: [],
      rules: {
        description: [
          {
            trigger: "blur",
            validator: function(rule, value, callback) {
              var string = value + "";
              var results = string.match(/___+/g);
              if (results === null) {
                callback(new Error("至少添加一處填空"));
              } else {
                callback();
              }
            }
          }
        ]
      }
    };
  },
  methods: {
    beforeSubmit() {
      this.localModel.chosen = [];
      for (let item of this.localModel.options)
        this.localModel.chosen.push(item);
      if (this.localModel.chosen.length == 0)
        this.localModel.chosen.push("@##$%^*&^%*^&%$%#$%^");
    },
    judgeThis() {
      return this.options.autoJudge && this.localModel.key == 1;
    },
    loadOrigin() {
      // 保存一份副本，以便取消更改时复原
      this.localModel = JSON.parse(JSON.stringify(this.setting));
    },
    handleChange(newVal) {
      let arr = newVal.match(/___+/g);
      let len = arr.length;
      this.localModel.options.forEach((str, index) => {
        if (index < len) arr[index] = str;
      });
      this.localModel.options = arr;
    },
    handleSave() {
      // 否则检测是否满足验证函数
      // 满足则将新的表单提交给上级
      this.$refs.textBlankForm.validate(valid => {
        if (valid) {
          this.beforeSubmit();
          this.$emit("change", this.localModel);
        } else {
          this.$message({ type: "warning", message: "请检查信息是否完整" });
        }
      });
    },
    handleCancel() {
      // 取消则还原修改
      this.loadOrigin();
      this.$emit("cancel", this.localModel);
    }
  },
  mounted() {
    this.loadOrigin();
    console.log("textB", this.localModel);
  },
  watch: {
    setting(newVal, oldVal) {
      this.loadOrigin();
    }
  }
};
</script>

<style scoped>
.textblank-editor .add_option {
  display: inline-block;
  zoom: 1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  border: 1px dashed #e0e0e0;
  padding: 6px 10px;
  background: #fafafa;
  color: #b2b2b2;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.8em;
}
.textblank-editor .option {
  display: flex;
  margin: 10px;
}
.textblank-editor .option .el-input {
  width: 75%;
  margin: 0 50px 0 0;
}
</style>